<template>
  <section>
    <el-collapse v-model="selCollapse" accordion @change="selCollapseEvent">
      <el-collapse-item :title="category.name" :name="category.id" v-for="category in productCategoryList" :key="category.id" >
        {{category.id}}
        <el-row class="checkboxRow">
          <el-checkbox-group v-model="selSpecs" @change="handleCheckedSpecsChange">
            <el-col class="checkbox" :span="12" v-for="spec in productSpecs" :key="spec.id">
              <el-checkbox @change="selSpecCheckbox($event,spec)" :label="spec.sn">
                {{spec.data.goodsName}} — {{spec.props}}
              </el-checkbox>
            </el-col>
          </el-checkbox-group>

        </el-row>
        <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                       layout="prev, pager, next"
                       :page-count="totalPage"
                       @current-change="goPage">
        </el-pagination>
      </el-collapse-item>
    </el-collapse>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "loadingToGoods",
    components:{},
    props:['goodsSkus'],
    data() {
      return {
        productCategoryList:null,
        selCollapse:null,
        totalPage:0,
        productSpecs:null,
        selSpecs:[]
      }
    },
    watch: {
      goodsSkus(nv,ov){
        if(nv){
          this.selSpecs=[]
          nv.forEach(sku=>{
            this.selSpecs.push(sku.sn)
          })
          this.getProductCategoryList()
        }
      },
      selCollapse(nv,ov){
        // console.log('折叠面板————————————————',nv)
        //获取这个分类下的产品
        if(nv){
          this.categoryId=nv
          this.getProByCatrgory()
        }
      }
    },
    created() {
      console.log(this.goodsSkus)
      this.goodsSkus.forEach(sku=>{
        this.selSpecs.push(sku.sn)
      })
      this.getProductCategoryList()
      console.log(this.selSpecs)
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getProByCatrgory(val-1)
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            this.productCategoryList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getProByCatrgory(pageNo){
        this.fetch({name:"getProductList",data:{page:pageNo?pageNo:0,categoryId:this.categoryId,companyId:this.department.companyId}})
          .then(res=>{
            console.log(res)
            this.totalPage=res.totalPages
            this.makeProSpcList(res.content)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      makeProSpcList(array){
        let tmp=[]
        array.forEach(a=>{
          a.productSpecs.forEach(spec=>{
            spec.data.goodsName=a.name
            tmp.push(spec)
          })
        })
        console.log(tmp)
        this.productSpecs=tmp
      },
      handleCheckedSpecsChange(e){
        // console.log(e)
        // console.log('————————————————————',this.selSpecs)
      },
      selSpecCheckbox(e,s){
        // console.log(e,s)
        if(e){
          this.$emit('addGoodsSku',s)
        }else {
          this.$confirm('请在表格内进行删除？')
            .then(()=> {
              console.log('点完后的selSpecs',this.selSpecs,this.goodsSkus)
              this.selSpecs.push(s.sn)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
        let type
        if(e){
          type=1
        }else {
          type=0
        }
        let data={
          type,goodsSku:s,
        }
      },
      selCollapseEvent(e){
        console.log(e)
        // this.selCollapse=e
      }
    }
  }
</script>

<style scoped>
  .checkbox{
    line-height: 30px;
  }
</style>
